﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>社区好生活</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/ydui.css?v=1.1.4" rel="stylesheet" />
    <script src="../js/ydui.flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/all.css?v=20180302" />
    <link href="https://cdn.bootcss.com/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet">
    <style type="text/css">
        .swiper-wrapper img {
            width: 100%;
        }

        .swiper-pagination-bullet-active {
            background: #1CBB7F;
        }
    </style>
</head>
<body ms-controller="detail" class="ms-controller">
    <div class="g-flexview">
        <div class="g-scrollview">
            <div class="l-slider" style="position: relative;height:7.5rem">
                <span class="detail_back iconfont icon-back1" onclick="history.go(-1)"></span>
                <div class="swiper-wrapper">
                    <div class="swiper-slide" ms-for="el in @imageinfo">
                        <a><img ms-attr="{'src':ComFunJS.FilePath(el,'/750/750')}" ms-on-click="@showhide('show')" /></a>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!--详情页轮播结束-->
            <div class="mall_silder" ms-on-click="@showhide('hide')">
                <div class="swiper-container" style="padding-top: 2rem;">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" ms-for="el in @imageinfo">
                            <div class="touch">
                                <img ms-attr="{'src':ComFunJS.FilePath(el,'/750/750')}" />
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <!--大图轮播-->
            <!--详情页轮播结束-->
            <div class="secdeatail clearfix">
                <div class="secdeatail_con clearfix">
                    <p>{{@datainfo.Title}}</p>
                    <p style="color:#808080;font-size:.25rem;">{{@datainfo.Desp}}</p>
                    <div>
                        <h1 class="iconfont icon-liulan2"></h1>
                        <p>{{@datainfo.ViewQty}}人浏览</p>
                    </div>
                </div>
                <p class="lease">¥{{@datainfo.Price1}}</p>
                <h2 ms-if="@datainfo.Point>0">可用存款：¥{{@datainfo.Point}}</h2>
                <h2 ms-if="@datainfo.RePoint>0">存：¥{{@datainfo.RePoint}}</h2>
                <div class="jionshopping" ms-on-click="@memberadd">
                    <p class="iconfont icon-03f"></p>
                </div>
            </div>
            <!--<div class="favourable">
                <ul class="clearfix">
                    <li><p class="iconfont">&#xe6b4;</p><h1>品质保证</h1></li>
                    <li><p class="iconfont">&#xe6b6;</p><h1>品质保证</h1></li>
                    <li><p class="iconfont">&#xe6b7;</p><h1>品质保证</h1></li>
                </ul>
            </div>-->
            <div class="video_list" ms-if="@datainfo.SendInfo">
                <div class="_list_title">
                    <span class="iconfont icon-shuxian1"></span>
                    <p>配送说明</p>
                </div>
                <div>
                    <p style="padding:5px 10px;font-size:13px;">{{@datainfo.SendInfo}}</p>
                </div>
            </div>
            <div id="shop_detail">
                <div class="_list_title">
                    <span class="iconfont icon-shuxian1"></span>
                    <p>商品详情</p>
                </div>
                <div class="tabcontent " style="display: block;padding:5px 10px;font-size:13px;">
                    <div class="deail_text clearfix" ms-html="@datainfo.Details">
                    </div>
                </div>
            </div>
            <!--<div id="shop_detail">
                <div class="tab clearfix">
                    <p class="change">商品详情</p>
                    <p>产品参数</p>
                    <p>质检报告</p>
                </div>-->
            <!--<div id="tab_shop">
                <div class="tabcontent " style="display: block;">
                    <div class="deail_text clearfix" ms-html="@datainfo.Details">

                    </div>
                </div>-->
            <!--<div class="tabcontent">
                <table class="table-border" cellspacing="" cellpadding="">
                    <tr>
                        <td colspan="2"><strong>基本信息</strong></td>
                    </tr>
                    <tr ms-for="el in @ExtData">
                        <td>{{el.TypeName}}</td>
                        <td>{{el.TypeValue}}</td>
                    </tr>
                    <tr>
                        <td colspan="2"><strong>适合车型</strong></td>
                    </tr>
                    <tr ms-for="el in @vData">
                        <td>{{el.brandname}}</td>
                        <td><p>{{el.seriesname}}-{{el.stylename}}</p></td>
                    </tr>
                </table>
            </div>-->
            <!--<div class="tabcontent ">
                        <div class="deail_text" ms-html="@modelData.IdentifyUrl">

                        </div>
                    </div>
                </div>
            </div>-->
        </div>
        <div class="jui-secbalance">
            <p ms-on-click="@brouceIn" ms-class="['gouwuche','iconfont','icon-03f',@SumQty!='0'&&'active']"><i ms-if="@SumQty!='0'">{{@SumQty}}</i></p>
            <p class="text"><i ms-if="@SumQty=='0'">购物车是空的</i><span ms-if="@SumQty!='0'">￥{{@SumPrice}}</span></p>
            <a ms-class="@SumSelQty!='0'&&'active'" ms-on-tap="@balance">去结算</a>
        </div>
    </div>
    <div class="bereturn_popup">
        <div class="_popup_content">
            <div class="empty clearfix">
                <div class="crile fl">
                    <label class="cell-right" style="height: .82rem;position: relative;">
                        <input type="checkbox" value="1" name="quan" class="cell-input" checked="checked" ms-on-click="@selectall($event)" style="width: 100%;left: 0;">
                        <i class="cell-checkbox-icon"></i>
                    </label>
                </div>
                <p class="fl">全选<span ms-if="@SumSelQty>0">(已选择{{@SumSelQty}}件)</span></p>
                <p class="fr" ms-on-click="@empty"><span class="iconfont icon-delete1"></span>清空购物车</p>
            </div>
            <div ms-class="[@productlist.length>=3&&'changehight']">
                <div class="shopping-list clearfix" ms-for="el in @productlist">
                    <div class="crile fl">
                        <label class="cell-right">
                            <input type="checkbox" value="1" name="checkbox" class="cell-input" ms-on-click="@membersub($event,el)" ms-attr="{checked:el.ISSel==true?'checked':''}" style="width: 100%;left: 0;">
                            <i class="cell-checkbox-icon"></i>
                        </label>
                    </div>
                    <div class="listcon fr">
                        <img ms-attr="{'src':ComFunJS.FilePath(el.ImgUrl,'/144/144')}">
                        <p>{{el.Title}}</p>
                        <h1>{{el.Desp}}</h1>
                        <h2>¥{{el.Price1}}</h2>
                        <div class="bonus">
                            <span ms-on-click="@Add($event,el,'minus')">－</span>
                            <p>{{el.Qty}}</p>
                            <span ms-on-click="@Add($event,el,'plus')">+</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="black_dark">
        </div>
    </div>
    <script src="//cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/Swiper/4.1.0/js/swiper.min.js"></script>
    <script src="../js/ydui.js"></script>
    <script src="../js/avalon.mobile.min.js"></script>
    <script src="../js/ComFunJS.js?v=20180331"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script>

        var model = avalon.define({
            $id: "detail",
            datainfo: { "Details": "" },
            imageinfo: [],
            productlist: [],
            SumPrice: 0,
            SumQty: 0,
            SumSelQty: 0,
            ctype: "1",
            ID: ComFunJS.getQueryString('id'),
            get: function () {
                $.getJSON('/api/pro/model/' + model.ID, function (r) {
                    model.datainfo = r.result;
                    model.imageinfo = r.result.ImgUrl.split(',');
                    var mySwiper = new Swiper('.l-slider', {
                        autoplay: true,
                        pagination: {
                            el: '.swiper-pagination',
                            dynamicBullets: true,
                        },
                    })
                    $('.black_dark').click(function () {
                        $('.bereturn_popup').removeClass('brouce-in');
                    })
                    if (model.datainfo.Type1 == 33 || model.datainfo.Type1 == 86) {
                        model.ctype = "2";
                    }
                    model.gettrolleylist();
                    var desp = "";
                    if (model.datainfo.Desp) {
                        if (model.datainfo.Desp.length > 15) {
                            desp = model.datainfo.Desp.substring(0, 15) + "，";
                        } else {
                            desp = model.datainfo.Desp + "，";
                        }
                    }
                    desp += "零售价：¥" + model.datainfo.Price1;
                    if (model.datainfo.Point && model.datainfo.Point > 0) {
                        desp += "，可用存款：¥" + model.datainfo.Point;
                    }
                    if (model.datainfo.RePoint && model.datainfo.RePoint > 0) {
                        desp += "，存：¥" + model.datainfo.RePoint;
                    }

                    ComFunJS.GETWXJSSDK(model.datainfo.Title, desp, model.datainfo.ImgUrl);
                })
            },
            brouceIn: function () {
                if (model.productlist.length > 0) {
                    $('.bereturn_popup').addClass('brouce-in');
                }
            },
            showhide: function (type) {
                if (type == 'show') {
                    $('.mall_silder').show()
                    var swiper1 = new Swiper('.swiper-container', {
                        paginationClickable: true,
                        spaceBetween: 30,
                    });
                }
                if (type == 'hide') {
                    $('.mall_silder').hide()
                }
            },
            Add: function (event, el, flag) {
                if (flag == "plus") {
                    el.Qty = el.Qty + 1;
                } else if (flag == "minus") {
                    el.Qty = el.Qty - 1;
                }
                if (el.Qty < 1) {
                    cart.delProduct(el.ID);
                } else {
                    cart.updateProductQty(el.ID, el.Qty);
                }
                model.gettrolleylist();
                if (event) {
                    event.stopPropagation();
                    event.preventDefault();
                }
            },
            selectall: function (event) {
                if (event.currentTarget.checked == true) {
                    $(".shopping-list :checkbox").prop("checked", true);
                    cart.updateProductSelAll(model.ctype, true);
                } else {
                    $(".shopping-list :checkbox").prop("checked", false);
                    cart.updateProductSelAll(model.ctype, false);
                }
                model.gettrolleylist();
            },
            membersub: function ($event, el) {
                if ($event.currentTarget.checked == true) {
                    cart.updateProductSel(el.ID, true);
                } else {
                    cart.updateProductSel(el.ID, false);
                }
                model.gettrolleylist();
            },
            balance: function () {
                if (model.member == 0) {
                    YDUI.dialog.toast("您还没有选择商品", "none", 1000);
                } else {
                    window.location.href = '../order/new.html?ctype=' + model.ctype;
                }
            },
            memberadd: function () {
                cart.addProduct(model.datainfo, model.ctype);
                model.gettrolleylist();
            },
            gettrolleylist: function () {
                model.productlist = cart.getProductList(model.ctype);
                var qty = cart.getProductQty(model.ctype);
                model.SumPrice = qty.Price1;
                model.SumQty = qty.Qty1;
                model.SumSelQty = qty.Qty2;
            },
            CartQty: 0,
            AddCart: function () {
                if (model.datainfo.ID) {
                    cart.addProduct(model.datainfo, model.ctype);
                    model.CartQty = cart.getProductQty().Qty2;
                }
            },
            GoToPay: function () {
                window.location.href = "../order/new.html";
            }
        })
        avalon.ready(function (r) {

            model.get();

        })
    </script>
</body>
</html>
